<template>
  <basic-container>
    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">企业数据分析</h4>
          <div class="row row padding-top20">
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">本月资金动态（截至昨天）</div>
                <div class="dd-person-status ng-binding">现金资产余额
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('现金资产余额',0)">863698.95
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本月资金收入
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本年度支出与收入',0)">276895.36
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本月资金支出
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本年度支出与收入',0)">186965.3
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本日资金收入
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="capitalList('本日资金收入',1)">14632.65
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本日资金支出
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="capitalList('本日资金支出',1)">8965.42
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工流动情况情况</div>
                <br>
                <div class="dd-person-status ng-binding">在职人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('在职人数',18)">18
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">离职人数
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('离职人数',3)">3
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工社会保险情况</div>

                <br>
                <div class="dd-person-status ng-binding">已投保人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('已投保人数',59)">59
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">未投保人数
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('未投保人数',2)">2
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class=" col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工合同情况</div>
                <br>
                <div class="dd-person-status ng-binding">逾期人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('逾期人数',1)">1
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">逾期预警(3个月内)
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('逾期预警',5)">5
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow attendance dd-dataCenter-heading ng-binding">
          <div>
            <h4 style="font-weight:bold">企业考勤分析</h4>
          </div>
          <div class="attDate"
               style="width:30%">
            <h4 style="width:150px">考勤日期：</h4>
            <el-date-picker type="date"
                            value-format="yyyy/MM/dd"
                            v-model="date"
                            @change="changeCharts"
                            placeholder="选择考勤日期"></el-date-picker>
          </div>

        </div>
        <div class="col-sm-12">
          <div id="memberLineChart"
               class="member-line-chart"
               _echarts_instance_="1543301061157"
               style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
            <div id="myChart"
                 :style="{width: '100%', height: '400px'}"></div>
          </div>
        </div>
      </el-main>
      <el-dialog :title="employeeTitle"
                 width="50%"
                 :visible.sync="employeeVisible"
                 :close-on-click-modal="false">
        <el-table :data="employeeDatas"
                  style="width:100%;"
                  border
                  stripe
                  :header-row-class-name="headStyle"
                  highlight-current-row
                  v-loading="listLoading"
                  :row-class-name="tableRowClassName"
                  @sort-change="handleSortChange">
          <el-table-column prop="index"
                           :formatter="index_formatter"
                           label="序号"></el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="dept"
                           label="部门"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="position"
                           label="职位"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-col :span="24"
                class="toolbar"
                id="pageDiv">
          <el-pagination small
                         background
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         :total="total"
                         layout="total,sizes, prev, pager, next"
                         style="float:right;"></el-pagination>
        </el-col>

        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="employeeVisible=false">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="capitalTitle"
                 width="800px"
                 :visible.sync="capitalVisible"
                 :close-on-click-modal="false">
        <div id="cashLineChart"
             class="member-line-chart">
          <div id="myCashChart"
               :style="{width: '750px', height: '400px'}"></div>
        </div>
      </el-dialog>
    </el-container>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import deptTree from "../report/deptTree.vue";
export default {
  name: "table_dept",
  components: {
    deptTree
  },
  data() {
    return {
      num: 0,
      title: "今",
      date: new Date(),
      capitalTitle: "",
      capitalDatas: [],
      employeeDatas: [],
      gridDatas: [],
      data: [21, 5, 1, 0, 1, 8],
      data1: [46, 10, 0, 0, 1, 2],
      data2: [18, 3, 0, 2, 5, 8],
      sort: {
        sort: "sort",
        order: "asc"
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      employeeTitle: "",
      listLoading: false,
      dialogStatus: false,
      isDanwei: true,
      dialogFormVisible: false,
      addDisabled: true,
      employeeVisible: false,
      capitalVisible: true,
      _btn_add_flag: false,
      captail: [
        {
          type: "报销-差旅费",
          name: "胡小伟",
          dept: "产品设计部",
          amount: "3991.7"
        },
        {
          type: "报销-办公费用",
          name: "石恩明",
          dept: "技术研发部",
          amount: "7965.5"
        },
        {
          type: "报销-招待费",
          name: "张一淼",
          dept: "市场部",
          amount: "1993.7"
        },
        {
          type: "报销-其他费用",
          name: "胡光苗",
          dept: "运营支持部",
          amount: "34931.7"
        }
      ],
      wages: [
        {
          type: "工资",
          name: "胡小伟",
          dept: "产品设计部",
          amount: "8500"
        },
        {
          type: "工资",
          name: "石恩明",
          dept: "技术研发部",
          amount: "7900"
        },
        {
          type: "工资",
          name: "张一淼",
          dept: "市场部",
          amount: "9000"
        },
        {
          type: "工资",
          name: "胡光苗",
          dept: "运营支持部",
          amount: "3600"
        }
      ],
      baseEmployee: [
        {
          name: "胡小伟",
          dept: "产品设计部",
          position: "需求分析师"
        },
        {
          name: "张帆",
          dept: "产品设计部",
          position: "需求分析师"
        },
        {
          name: "李丽萍",
          dept: "产品设计部",
          position: "副总监"
        },
        {
          name: "开赛",
          dept: "技术研发部",
          position: "中级工程师"
        },
        {
          name: "李鹏明",
          dept: "技术研发部",
          position: "高级工程师"
        },
        {
          name: "刘娣",
          dept: "技术研发部",
          position: "总监"
        },
        {
          name: "潘元明",
          dept: "市场部",
          position: "初级营销经理"
        },
        {
          name: "凯南",
          dept: "运营支持部",
          position: "财务经理"
        }
      ]
    };
  },
  created() {},
  computed: {
    ...mapGetters(["elements", "permissions"])
  },
  methods: {
    capitalList(name, type) {
      this.capitalVisible = true;
      this.capitalTitle = name;
      let myChart1 = this.$echarts.init(document.getElementById("myCashChart"));
      if (type == 0) {
        myChart1.setOption({
          title: {
            text: "本年度支出与收入"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["支出", "收入"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "支出",
              type: "line",
              stack: "总量",
              data: [
                17163,
                29686,
                48658,
                32658,
                25789,
                36894,
                59686,
                78965,
                74125,
                36985,
                45869,
                24785
              ]
            },
            {
              name: "收入",
              type: "line",
              stack: "总量",
              data: [
                19025,
                31536,
                43569,
                68653,
                34503,
                58965,
                76985,
                102365,
                86486,
                48965,
                58960,
                18632
              ]
            }
          ]
        });
      } else {
        var base = +new Date(2018, 11, 1);
        var oneDay = 24 * 3600 * 1000;
        var date = [];
        var data = [];
        var data1 = [];

        for (var i = 1; i < 30; i++) {
          var now = new Date((base += oneDay));
          date.push(
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
          );
          data.push(Math.floor(Math.random() * 100000) / 100);
          data1.push(Math.floor(Math.random() * 100000) / 100);
        }
        myChart1.setOption({
          tooltip: {
            trigger: "axis"
          },
          title: {
            text: "本月资金流入支出"
          },
          legend: {
            data: ["支出", "收入"]
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: "value"
          },

          series: [
            {
              name: "支出",
              type: "line",
              stack: "总量",
              itemStyle: {
                color: "rgb(255, 70, 131)"
              },
              data: data1
            },
            {
              name: "收入",
              type: "line",
              stack: "总量",

              data: data
            }
          ]
        });
      }
    },
    changeCharts(val) {
      this.num++;
      if (this.num % 2 == 0) {
        this.data = this.data1;
      } else {
        this.data = this.data2;
      }
      console.log(this.num);
      this.title = val + " ";
      this.drawLine();
    },
    drawLine() {
      this.capitalVisible = false;
      const safe = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {},
          toolbox: {
            show: true,
            orient: "horizontal",
            x: "80%",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          title: {
            text: this.title + "日考勤情况",
            x: "center",
            y: "top",
            textAlign: "center"
          },
          xAxis: {
            type: "category",
            data: ["正常", "迟到", "早退", "缺卡", "旷工", "外勤"]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "人数",
              type: "bar",
              data: safe.data,
              itemStyle: {
                normal: {
                  color: "#409EFF"
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  color: "auto",
                  fontSize: "20"
                }
              }
            }
          ]
        },
        true
      ),
        myChart.on("click", function(param) {
          // if (param.value > 10) {
          //   this.employeeDatas = this.baseEmployee
          // } else {
          //   for (var i = 0; i < param.value; i++) {
          //     this.employeeDatas[i] = this.baseEmployee[i]
          //   }
          // }
          safe.employeeList(param.name, param.value);
        });
    },
    employeeList(name, num) {
      this.employeeDatas = [];
      if (num > 10) {
        this.employeeDatas = this.baseEmployee;
      } else {
        for (var i = 0; i < num; i++) {
          this.employeeDatas[i] = this.baseEmployee[i];
        }
      }
      this.employeeVisible = true;
      this.employeeTitle = name;
    },
    // capitalList(name, type) {
    //   console.log(name + type)
    //   if (type == 1) {
    //     this.capitalDatas = this.captail
    //   } else {
    //     this.capitalDatas = this.wages
    //   }
    //   this.capitalVisible = true
    //   this.capitalTitle = name
    // },

    handleSortChange(sort) {
      this.sort = {
        sort: sort.prop,
        order: sort.order == "ascending" ? "asc" : "desc"
      };
      this.getDataGrid();
    },
    tableRowClassName(row, index) {
      //把每一行的索引放进row
      row.index = row.rowIndex;
    },
    headStyle({ row, rowIndex }) {
      return "table_head_style";
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index;
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.drawLine();
  }
};
</script>
<style lang="scss">
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding: 0 20px;
}
.pull-right {
  padding: 1px 5px;
  float: right;
  font-size: 16px;
}
</style>

